import React, { useCallback, useEffect, useState } from 'react';
import { postLsCarAccreditFindCarAccredit } from '../../../../api'
import { useHistory, useLocation } from 'react-router-dom';
import AddTemporaryModule from './components/AddTemporaryModule'
import { TemporaryEnterNextAll } from './style';
import { message, PageHeader, Table, Button } from 'antd'

const TemporaryEnterNext = () => {
    const { state } = useLocation();
    const history = useHistory();
    const [listData, setListData] = useState([]);
    const [pagingData, setPagingData] = useState({
        currentPage: 1,
        size: 10,
        total: 0
    })
    const [addTemporaryModuleShow, setAddTemporaryModuleShow] = useState(false);
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            parames.carId = state.id;
            ; (async () => {
                const { code, msg, data } = await postLsCarAccreditFindCarAccredit(parames);
                if (code === '20000') {
                    setListData(data.records);
                    setPagingData({
                        currentPage: parames.currentPage,
                        size: parames.size,
                        total: data.total
                    })
                } else {
                    message.error(msg);
                }
            })()
        },
        [state],
    )
    useEffect(() => {
        listFun();
    }, [listFun]);
    //添加车辆进出时间
    const handleAddTemporary = () => {
        setAddTemporaryModuleShow(true)
    }
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${pagingData.total}条`,
        //每页条数
        pageSize: pagingData.size,
        //当前页数
        current: pagingData.currentPage,
        //数据总数
        total: pagingData.total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size: pagingData.size
        }
        listFun(parames);
    }
    const columns = [
        {
            title: '序号',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '授权人员',
            dataIndex: 'authMainName'
        },
        {
            title: '授权时间',
            dataIndex: 'createTime'
        },
        {
            title: '有效进入时间',
            render: (text, recode) => <span>
                {recode.effectiveStartIn}～{recode.effectiveEndIn}
            </span>
        },
        {
            title: '有效驶出时间',
            render: (text, recode) => <span>
                {recode.effectiveStartOut}～{recode.effectiveEndOut}
            </span>
        }
    ];
    return <TemporaryEnterNextAll>
        <PageHeader
            className="site-page-header"
            title="临时进出时间记录"
            onBack={() => history.go('-1')}
            extra={[
                <Button key="1" type="primary" onClick={() => handleAddTemporary()}>
                    添加车辆临时进出时间
                </Button>,
            ]}
        />
        <Table
            dataSource={listData}
            columns={columns}
            bordered
            size='small'
            rowKey='id'
            pagination={pagination}
        />
        <AddTemporaryModule
            setAddTemporaryModuleShow={setAddTemporaryModuleShow}
            addTemporaryModuleShow={addTemporaryModuleShow}
            carId={state.id}
            listFun={listFun}
        />
    </TemporaryEnterNextAll>
}

export default TemporaryEnterNext;